<template>

  <div class="box-centent">
    <div class="nav-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'project' }">创客集市</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'project' }">创业项目</el-breadcrumb-item>
        <el-breadcrumb-item>成果展示</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="details-box">
      <el-image style="width: 460px; height: 240px" :src="url"></el-image>
      <div class="details-content">
        <div class="title">基于车联网的自动红绿灯控制系统</div>
        <div class="content">
          <div class="list">成立时间: 2020-06-02</div>
          <div class="list">所属领域: 互联网</div>
          <div class="list">项目负责人: 詹敏</div>
          <div class="list">成员数: 5人</div>
        </div>
      </div>
    </div>
    <div class="prospectus-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="项目介绍" name="first">
          <div class="prospectus-content">
            <div class="member">
              项目成员:
              <div class="member-name">
                <div class="name-list">程敏</div>
                <div class="name-list">张龙</div>
                <div class="name-list">程敏</div>
                <div class="name-list">谢表</div>
              </div>
            </div>

            <div class="details">
              <div class="details-title">项目详情:</div>
              <div class="details-list">城市智能交通中，有些城市的红绿灯装有信号控制系统，在所有道路资源都充分使用的条件下红绿灯的转换频率只能按时间分配，不可能让路上的车辆变少，不能合理的红绿灯配时让道路的通行率大大降低，同时会延长机动车和行人等候通行的时间降低了交通通行效率。</div>
              <div class="details-list">
                对于当前出现的上述问题，科缔欧智能红绿灯自动控制系统采用科缔欧智能人员监测分析摄像机，可以实时监测行人数量来智能转换红绿灯
              </div>
              <div class="details-list">
                城市智能交通中，有些城市的红绿灯装有信号控制系统，在所有道路资源都充分使用的条件下红绿灯的转换频率只能按时间分配，不可能让路上的车辆变少，不能合理的红绿灯配时让道路的通行率大大降低，同时会延长机动车和行人等候通行的时间降低了交通通行效率。
              </div>

              <div class="details-title">项目创新点:</div>
              <div class="details-list">城市智能交通中，有些城市的红绿灯装有信号控制系统，在所有道路资源都充分使用的条件下红绿灯的转换频率只能按时间分配，不可能让路上的车辆变少，不能合理的红绿灯配时让道路的通行率大大降低，同时会延长机动车和行人等候通行的时间降低了交通通行效率。</div>
              <div class="details-list">
                对于当前出现的上述问题，科缔欧智能红绿灯自动控制系统采用科缔欧智能人员监测分析摄像机，可以实时监测行人数量来智能转换红绿灯
              </div>
              <div class="details-list">
                城市智能交通中，有些城市的红绿灯装有信号控制系统，在所有道路资源都充分使用的条件下红绿灯的转换频率只能按时间分配，不可能让路上的车辆变少，不能合理的红绿灯配时让道路的通行率大大降低，同时会延长机动车和行人等候通行的时间降低了交通通行效率。
              </div>

              <div class="details-title">商业计划书:</div>
              <div class="details-title">其他资料:</div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="成员招募" name="second">
          <div class="prospectus-content">
            <div class="info"></div>
            <div class="btn">
              <button>申请</button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目成果" name="third">
          <div class="prospectus-content">
            <div class="member">
              项目成员:
              <div class="member-name">
                <div class="name-list">程敏</div>
                <div class="name-list">张龙</div>
                <div class="name-list">程敏</div>
                <div class="name-list">谢表</div>
              </div>
            </div>

            <div class="details">
              <div class="details-title">项目详情:</div>
              <div class="details-list">城市智能交通中，有些城市的红绿灯装有信号控制系统，在所有道路资源都充分使用的条件下红绿灯的转换频率只能按时间分配，不可能让路上的车辆变少，不能合理的红绿灯配时让道路的通行率大大降低，同时会延长机动车和行人等候通行的时间降低了交通通行效率。</div>
              <!-- <div class="details-list">
                对于当前出现的上述问题，科缔欧智能红绿灯自动控制系统采用科缔欧智能人员监测分析摄像机，可以实时监测行人数量来智能转换红绿灯
              </div> -->
              <div class="details-list">
                城市智能交通中，有些城市的红绿灯装有信号控制系统，在所有道路资源都充分使用的条件下红绿灯的转换频率只能按时间分配，不可能让路上的车辆变少，不能合理的红绿灯配时让道路的通行率大大降低，同时会延长机动车和行人等候通行的时间降低了交通通行效率。
              </div>
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>

    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 18px 0;
  /deep/.el-breadcrumb {
    flex: 1;
  }
  .nav-search {
    display: flex;
    align-items: center;
    /deep/ .el-input {
      width: 85%;
      .el-input__inner {
        border-radius: 12px;
        height: 21px;
        line-height: 21px;
        padding-left: 15px;
        background: #f5f7ff;
      }
    }
    /deep/ .el-input__prefix {
      left: 115px;
      .el-icon-search {
        line-height: 21px;
      }
    }
  }
}
.details-box {
  display: flex;
  // justify-content: center;
  align-items: center;
  padding: 28px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  .details-Image {
    width: 460px;
    height: auto;
  }

  .details-content {
    padding: 0 61px 0 20px;

    .title {
      width: 240px;
      min-width: 240px;
      font-size: 18px;
      font-weight: 900;
      color: rgba(6, 17, 37, 1);
    }
    .content {
      padding-top: 24px;
      font-size: 16px;
      color: rgba(19, 35, 64, 1);
      .list {
        margin-bottom: 20px;
      }
    }
  }
  .line {
    width: 1px;
    height: 200px;
    background: rgba(151, 151, 151, 1);
    opacity: 0.27;
    margin-top: 15px;
  }
  .financing {
    padding: 15px 72px 94px 101px;
    text-align: center;
    .financing-title {
      font-weight: 900;
      font-size: 18px;
      color: rgba(19, 35, 64, 1);
      padding-bottom: 12px;
    }
    .time {
      font-size: 16px;
      color: rgba(51, 69, 102, 1);
      padding-bottom: 20px;
    }
    .target {
      display: flex;
      justify-content: space-between;
      .target-item {
        text-align: center;
        font-size: 16px;
        color: rgba(51, 69, 102, 1);
        .money {
          margin-top: 12px;
          font-size: 22px;
          color: rgba(254, 82, 98, 1);
        }
      }
    }
  }
}
.prospectus-box {
  padding: 10px 0 97px 0;
  /deep/ .el-tabs {
    .el-tabs__nav-wrap {
      background-color: none !important;
      &::after {
        background-color: transparent;
      }
      .el-tabs__item {
        font-weight: 900;
        font-size: 20px;
        color: rgba(6, 17, 37, 1);
      }
      .el-tabs__active-bar {
        // width: 37px !important;
        // margin-left: 50%;
      }
      .el-tabs__item.is-active {
        color: none !important;
      }
      .el-tabs__item:hover {
        color: none;
      }
    }
  }
  .prospectus-content {
    .member {
      font-weight: 700;
      font-size: 18px;
      color: rgba(19, 35, 64, 1);
      .member-name {
        display: flex;
        padding: 10px 0 28px;
        font-size: 16px;
        color: rgba(51, 69, 102, 1);
        .name-list {
          margin-right: 32px;
        }
      }
    }
    .details {
      font-size: 16px;
      color: rgba(51, 69, 102, 1);
      .details-title {
        font-weight: 700;
        font-size: 18px;
        color: rgba(19, 35, 64, 1);
      }
      .details-list {
        margin-top: 20px;
        font-weight: 600;
      }
    }
  }
}
</style>
